<template>
	<view class="container">
		<view class="header">
			<!-- 头部 -->
			<view class="header_icon">
				<view class="header_msg">
					<image src="../../static/msg.png"></image>
					<text></text>
				</view>
				<view class="header_set">
					<image src="../../static/set.png"></image>
				</view>
			</view>
			<!-- 用户信息 -->
			<view class="user_section">
				<view class="userPortrait">
					<image :src="userInfo.avatarUrl"></image>
				</view>
				<view class="userLook">
					<text class="user-title clamp">12{{userInfo.nickName}}</text>
				</view>
			</view>
			<!-- 开通会员 -->
			<view class="vip_card">
				<image src="../../static/vip-card-bg.png" class="people_bg"></image>
				<view class="card_text">
					<image src="../../static/zs.png" mode=""></image>
					<text>普通会员</text>
				</view>
				<text class="card_equity">VIP权益</text>
				<text class="card_member">请联系管理员开通会员</text>
			</view>
			</view>
			<!-- 订单 -->
			<view class="order_container">
                 <image src="../../static/bar-nav/arc.png" class="arc"></image>
				 <view class="order_section">
				 	<view class="order_item">
				 		<image src="../../static/order/all.png"></image>
				 		<text>全部订单</text>
				 	</view>
					<view class="order_item">
						<image src="../../static/order/money.png" mode=""></image>
						<text>待付款</text>
					</view>
					<view class="order_item">
						<image src="../../static/order/goods.png" mode=""></image>
						<text>待收货</text>
					</view>
					<view class="order_item">
						<image src="../../static/order/tui.png" mode=""></image>
						<text>退款/售后</text>
					</view>
				 </view>
				 <!-- 浏览历史 -->
				 <view class="history_section">
				 	<view class="sec-header">
				 		<image src="../../static/people/history.png" mode=""></image>
				 		<text>浏览历史</text>
				 	</view>
					<scroll-view v-if="footprintList.length > 0" scroll-x class="h-list">
						<image v-for="(item, index ) in footprintList" :key="index" @longpress="deleteFootprint(item)" @click="navTo('/pages/product/detail?id=' + item.spuId)" :src="item.spuImg + '?x-oss-process=style/200px'" mode="aspectFill"></image>
					</scroll-view>
				 </view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		onLoad() {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		background-color: #f5f5f5;
	}

	.header {
		width: 100%;
		height: 520upx;
		background-color: #F0AD4E;
		background-image: url(../../static/user-bg.jpg);
	}

	.header .header_icon {
		width: 120%;
		height: 72upx;
		padding: 10upx;
		padding-left: 560upx;
		box-sizing: border-box;
		display: flex;
		position: relative;
	}

	.header_icon view {
		width: 60upx;
		height: 90%;
		align-items: center;
		float: left;
		margin-left: 20upx;
		box-sizing: border-box;
	}

	.header_msg image,
	.header_set image {
		width: 100%;
		height: 100%;
		align-items: center;
		box-sizing: border-box;
	}

	.header_msg text {
		width: 15upx;
		height: 15upx;
		position: absolute;
		top: 5upx;
		background-color: red;
		border-radius: 50%;
		z-index: 1;
	}

	.user_section {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		margin-top: 20upx;
		box-sizing: border-box;
		padding: 20upx;
	}

	.userPortrait image {
		width: 130upx;
		height: 130upx;
		border: 5upx solid #fff;
		border-radius: 50%;
	}

	.userLook text {
		font-size: 30upx;
		margin-left: 20upx;
	}

	.vip_card {
		height: 240upx;
		display: flex;
		flex-direction: column;
		color: #f7d680;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
	}

	.vip_card .people_bg {
		width: 380upx;
		height: 260upx;
		position: absolute;
		top: 20upx;
		right: 0;
	}

	.card_text {
		width: 100%;
		font-size: 29upx;
		color: #f7d680;
		margin-bottom: 28upx;
		display: flex;
	}

	.card_text image {
		width: 40upx;
		height: 45upx;
		margin-right: 15upx;
		box-sizing: border-box;
	}

	.card_text text {
		display: flex;
	}

	.card_equity {
		font-weight: 500;
		font-size: 36upx;
	}

	.card_member {
		font-size: 25upx;
		color: #d8cba9;
	}

	.order_container {
		width: 100%;
		background: #5f5f5f;
		margin-top: -150upx;
		padding: 0 20upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		box-sizing: border-box;
	}
	.order_container .arc{
		width: 100%;
		height: 36upx;
		position:absolute;
		left: 0;
		top: -37upx;
	}
	.order_section{
		width: 100%;
		height:170upx;
		display: flex;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10upx;
		padding: 20upx;
	}
	.order_section .order_item{
		width: 20%;
		height:120upx;
		flex: 1;
		padding: 10upx;
		box-sizing: border-box;
		
	}
	.order_item image{
		width: 30%;
		height:50%;
		margin-left: 60upx;
		box-sizing: border-box;
	}
	.order_item text{
		width: 100%;
		height:30%;
		font-size: 24upx;
		display: inline-block;
		text-align: center;
	}
	.history_section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		
	}
	.sec-header{
		width: 100%;
		display:flex;
		align-items: center;
		font-size: 28upx;
		line-height: 40upx;
		margin-left: 30upx;
	}
	.sec-header image{
		width: 45upx;
		height: 45upx;
		margin-right: 12upx;
		box-sizing: border-box;
	}
</style>
